<template>
  <div class="promotion-review">
    <OpDetail :data="detailData" detail-key="id" :api="opReviewDetail"> </OpDetail>
    <OpDataCount :id="detailData?.boInfoId"></OpDataCount>
    <Space
      v-if="detailData?.reviewStatus == OpReviewStatus.Pending"
      style="position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%)"
    >
      <Button type="primary" danger @click="handleReject">驳回申请</Button>
      <Button type="primary" @click="handleResove">审核通过</Button>
    </Space>
  </div>
</template>
<script setup lang="ts">
  import { opReview, promotionReviewDetail } from '@/api/institution/businessOpportunitiesManage';
  import OpDetail from '../components/OpDetail.vue';
  import { useRoute } from 'vue-router';
  import { onMounted, ref, h } from 'vue';
  import { IBusinessOpportunityReviewList } from '@/api/institution/model/businessOpportunitiesManageModel';
  import { opReviewDetail } from '@/api/institution/businessOpportunitiesManage';
  import OpDataCount from '../components/OpDataCount.vue';
  import { Button, Modal, Space } from 'ant-design-vue';
  import { Textarea } from 'ant-design-vue/es';
  import { BoStatusEnum, OpReviewStatus } from '@/enums/businessOpportunitiesEnum';

  const route = useRoute();
  const id = ref();
  onMounted(() => {
    id.value = route.query.id;
    queryDetail();
  });

  const detailData = ref<IBusinessOpportunityReviewList>();

  const handleReject = () => {
    let text: string | undefined = '';
    Modal.confirm({
      title: '驳回申请',
      okText: '确定驳回',
      okButtonProps: {
        type: 'primary',
        danger: true,
      },
      content: h(
        'div',
        {
          style: {
            display: 'flex',
          },
        },
        [
          h(
            'span',
            {
              style: {
                whiteSpace: 'nowrap',
              },
            },
            '驳回原因：',
          ),
          h(Textarea, {
            placeholder: '请输入驳回理由',
            style: {
              width: '300px',
              marginLeft: '10px',
            },
            autoSize: {
              minRows: 4,
              maxRows: 8,
            },
            onChange: (e) => {
              text = e.target.value;
            },
          }),
        ],
      ),
      onOk: async () => {
        await opReview({
          id: detailData.value?.id!,
          reviewStatus: OpReviewStatus.Rejected,
          reviewContent: text,
        });
        Modal.success({
          content: '已驳回申请',
        });
        queryDetail();
      },
    });
  };

  const handleResove = () => {
    Modal.warning({
      title: '审核通过',
      content: '确定要审核通过吗？',
      okText: '确定',
      cancelText: '取消',
      okCancel: true,
      onOk: async () => {
        await opReview({
          id: detailData.value?.id!,
          reviewStatus: OpReviewStatus.Approved,
        });
        Modal.success({
          content: '已审核通过',
        });
        queryDetail();
      },
    });
  };
  const queryDetail = async () => {
    detailData.value = await promotionReviewDetail(id.value);
  };
</script>
<style lang="less" scoped>
  .promotion-review {
    padding: 20px;
    width: 100%;
  }
</style>
